<template>
  <div id="Link">
    <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;"
              :left-options="{showBack: showBack, backText: '',preventGoBack:preventGoBack}" :right-options="{showMore: false}"
              @on-click-more="showMenus = true"
              @on-click-back="backFun">{{title}}
              <div slot="right" v-show="rightShow">
                <router-link to="/check/index">
                  首页
                </router-link>
              </div>
    </x-header>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {XHeader, TransferDom, cookie} from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      XHeader
    },
    computed: {
      ...mapState({
        showBack: state => state.vux.showBack,
        preventGoBack: state => state.vux.preventGoBack,
        urlBack: state => state.vux.urlBack,
        title: state => state.vux.title,
        rightShow:state => state.vux.rightShow
      })
    },
    data () {
      return {

      }
    },
    methods: {
      backFun() {
        if (this.preventGoBack) {
          this.$router.push({path: this.urlBack});
        }
      }
    }
  }
</script>
<style lang="less">
@hui:#555555;
@blue:#1babe3;
  #Link .vux-header-title {
    font-size: 18px;
  }
  #Link .menu div {
    color: #000;
  }
  #Link .vux-header{
    background-color: @hui !important;
  }
.vux-header .vux-header-left .left-arrow:before{
      border:2px solid #ffffff !important;
      border-width:2px 0 0 2px !important;
  }
.vux-header .vux-header-right a{
  color: #ffffff !important;
}
</style>
